<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="hello">{{totalprice}}</div>
    <script src="../vue.js"></script>
    <script>
        const vue01 = new Vue({
            el: '#hello',
            data: {
                books: [{
                        id: 100,
                        price: 300
                    },
                    {
                        id: 101,
                        price: 300
                    },
                    {
                        id: 102,
                        price: 300
                    },
                    {
                        id: 103,
                        price: 300
                    },
                ]
            },
            computed: {
                //箭头函数遍历 我也不知道原理 但是第一遍写我就会了
                /*             totalprice:function(){
                                let result = 0 ;
                               this.books.forEach(book => {
                                   result += book.price;
                               });
                               return result;
                            } */

                /*     totalprice:function(){
                        let result = 0 ; 
                        for(let i = 0 ;i<this.books.length;i++){
                            result+=this.books[i].price;
                        }
                        return result;
                    } */

                // es6
                /*      totalprice:function(){
                         let result = 0;
                         for(let book of this.books){
                             result += book.price;
                         }
                         return result;
                     } */

                //es6 2:
                totalprice: function () {
                    let result = 0;
                    for (let i in this.books) {
                        result += this.books[i].price;
                    }
                    return result;
                }
            }
        
        })
    </script>
</body>

</html>